<template>
	<!-- /*首页*/ -->

	<div  class='index_bg '>
		<div class='main relative'>
				<!-- 语言切换 --> 
				<ul class='clear text-right language'>
					<li  v-for='(item,index) in lan' :key='index' @click='changeLan(index)' class='fr cursor' :class='{active:currentIndex==index}'>&nbsp;{{item.title}} <span v-if='index==1' class='color-white'>/</span> </li>
				</ul>
				<div  class='mt32 '> 
					<!-- 标语 -->
					<div  class='head_title' :style='{fontWeight:currentIndex==0 ? "400":"600"}'>
						{{AllData.titleA}} <br>{{AllData.titleB}}
					</div >
					<!-- 内容 -->
					<p class='ft20 mt12 text-indent relative pt30' :class='{"lh-180":currentIndex==1,"lh-150":currentIndex==0}'>
						<span class='white-line '></span>
						<span :class='{fontLighter:currentIndex==0}'>{{AllData.passage.a}}</span>
					</p>
					<p class='ft20  text-indent ' :class='{"lh-180":currentIndex==1,"lh-150":currentIndex==0}'>
						<span :class='{fontLighter:currentIndex==0}'>{{AllData.passage.b}}</span>
					</p>
				</div>
				<!-- 进入详情 -->
				<div  class='text-right pt30 arrow_bg pb30'>
					<img src='static/img/index_arrow.png' width="78" height="32"  class='cursor' @click='jump_to_financ'>
				</div>
		</div> 
	</div>
</template>

<script>
	export default {
		name:'index',
		inject:['reload'],
		props:{
			language:Object
		},
		data(){
			return {
				 lan:[{title:'English'},{title:'中'}],
				 currentIndex:this.$store.state.language == 'zh_cn' ?  1 : 0,
			}
		},
		created(){
			                   
		},
		methods:{
			changeLan(num){
				this.currentIndex = num
				this.$store.commit("setlanguage",num == 1 ? "zh_cn" : "en")  
				this.reload()
			},
			jump_to_financ(){
				this.$router.push('/financing_case/1')
			}
		},
		computed:{
			AllData(){
				return this.language.home
			}
		}
	}
</script>

<style scoped="scoped">
/*首页背景图*/
.index_bg{background: url(../assets/img/index_banner.jpg) no-repeat center -106px;overflow: auto;}

.main{width: 940px;margin:0 auto;padding:50px 0;color:#fff;}
/*语言*/
.language li.active{color:#EACD76;}
/*标题*/
.head_title{font-size: 46px;font-weight: 600;line-height: 1.5;text-align: center;}
.white-line{position: absolute;width: 164px;height: 4px;left:50%;top:0;margin-left: -82px;background: #fff;}
.arrow_bg{ background: url(../assets/img/index_dot_bg.png) no-repeat left center/4%;}

/*移动端适配*/
@media(max-width: 420px){  
	.index_bg{height: auto;overflow: hidden;background-color: #284062;}
	.main{width: 100%;padding: 20px 30px 70px;}
	.head_title{font-size: 28px;}
	.main p{font-size: 16px;}
	.arrow_bg{width: 85%;bottom: 0;} 
}
</style>